<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h1 @click="handleClick">this is a change</h1>
    <h1>{{name}}</h1>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  // components: {
  //   HelloWorld
  // }
  setup(){
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      // 同步
      // store.commit('changeName', 'hello')
      // 异步
      store.dispatch('getData');
    }

    return { name, handleClick}
  }
}
</script>
